<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小秘密记事本</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 20px;
            margin-top: 5px;
            text-align: left;
            padding-left: 10px;
            padding-right: 15px;
            list-style: none;
        }


        .box {
            width: 800px;
            margin: 0 auto;
            border: 1px solid;
        }

        .head {
            text-align: center;
            height: 100px;
            background-color: pink;
            padding-top: 20px;
        }

        .show {
            height: 200px;
        }

        .del {
            width: 20px;
            cursor: pointer;
        }

        li:hover {
            background-color: darkgrey;
        }
    </style>
</head>


<body>
    <div class="box">
        <div class="head">
            <input type="text" placeholder="请输入需要记录的事情" style="width: 40%; height: 50px; " name="remark">
            <button style="width: 10%; height: 54px;" onclick="addClick(event)">添加</button>
        </div>
        <div class="show">
            <ul>
                <!-- <li><span>133</span><span class="del">X</span></li>-->
            </ul>
        </div>
    </div>


    <script>


        // 用来记录所有的数据
        const list = [];

        // 获取想要的对象
        const text = document.querySelector('input');
        const btn = document.querySelector('button');
        const ul = document.querySelector('ul');

        text.addEventListener('keyup', enter);

        function enter(e) {
            if (e.keyCode == 13) addClick()
        }


        // 按钮点击事件
        function addClick(e) {
            // 得到 input 框内输入的值
            // console.log(text.value);

            if (text.value != '') {
                //将文本框内的数据添加到 list 中
                list.push({
                    id: Date.now().toString(),//用于后面分辨是哪条数据
                    value: text.value
                })
            } else {
                console.log('没有数据，需要填充数据');
            }

            // 点击按钮后，文本框为空
            text.value = '';

            // console.log(list);

            render(list);
        }

        // 渲染 list 里面的数据(使用拼接方法)
        // function render(_list) {
        //     return ul.innerHTML = _list.reduce((acc, item) => {
        //         return acc.concat(`<span>${item.value}</span><span class="del">X</span>`)
        //     }, '<li>').concat('</li>')
        // }


        // 渲染 list 里面的数据(使用创建元素方法)
        function render(_list) {

            // 每次重新渲染先清空
            ul.innerHTML = ''

            _list.reduce((acc, item) => {
                // 创建需要的元素
                const li = document.createElement('li');
                const span1 = document.createElement('span');
                const span2 = document.createElement('span');

                li.addEventListener('dblclick', liClick)

                // 设置他们的属性
                span1.innerText = item.value;
                span1.id = item.id;
                span2.setAttribute('class', 'del');
                span2.setAttribute('onclick', 'del(event)');
                span2.innerText = 'X'

                // 将创建的元素插入
                li.append(span1, span2);
                ul.append(li);
                return ul;

            }, ul)
        }

        // 点击删除事件
        function del(e) {
            // console.log(e.target.previousElementSibling);
            // console.log(e.target.parentNode.children[0]);

            // 得到点击的元素旁边的元素
            let span1 = e.target.previousElementSibling;

            // console.log(span1.id);
            // console.log(list.findIndex(item => item.id === span1.id))

            // 找到点击的id，并从数组中删除
            list.splice(list.findIndex((item) => {
                return span1.id === item.id
            }), 1)

            render(list)
        }


        // 给li元素添加双击事件
        function liClick(e) {
            let oldValue;
            // console.log(e.target.children[0].innerText);
            // 显示原来的文本
            e.target.innerHTML = `<input type='text' value='${e.target.children[0].innerText}' />`;

            // console.log(e.target);

            // e.target.children[0].focus()

            //聚焦得到原本的值 
            e.target.children[0].addEventListener('focus', function (e) {
                oldValue = e.target.value;
                // console.log(e.target.value);
            })

            // 按下回车
            e.target.children[0].addEventListener('keyup', function (e) {
                if (e.keyCode == 13) {
                    // console.log('按下回车=>', e.target.value);

                    // 将修改后的文本插入到数组中
                    list[list.findIndex(item => item.value == oldValue)].value = e.target.value;

                    // 重新渲染
                    render(list);

                }
            })


        }
    </script>
</body>

</html>